<template>
	<view class="container">
			
		
		<view class="swiperTop">
			<view class="header">
				<image class="left" @click="returnback()"  src="/static/icon/cha.png"></image>
				<image class="mid" v-if="houseDetail.house_info.is_collect == 1" @click="collect(houseDetail.house_info.Id,'cancel')" src="/static/icon/collect.png"></image>
				<image class="mid" v-if="houseDetail.house_info.is_collect == 0" @click="collect(houseDetail.house_info.Id,'add')" src="/static/icon/black.png"></image>
					
				
				<image class="right" src="/static/icon/dian.png"></image>			
			</view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item v-for="(item,index) in houseDetail.images_info" :key="index">
								
								
								<image :src=siteUrl+item.image class="swiper-image" mode="" v-if="item.type=='img'?true:false"></image>
								<image :src=siteUrl+item.image class="swiper-image" mode="" v-else @click="play(houseDetail.house_info.Id)"></image>
								
								
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="tip">
				
			</view>
			<view class="con_head">
				<view class="name">
					{{houseDetail.house_info.title}}
				</view>
				<view class="address">
					{{houseDetail.house_info.location_near}}
				</view>
				<view class="price">
					{{houseDetail.house_info.price}} <text> 元/月</text>
				</view>
				
				<view class="tags">
					<view class="tag" v-for="(item,index) in houseDetail.tags_info" :key="index">
						{{item}}
					</view>
				</view>
				
				<view class="houseProperty">
					<view class="property">
						<view class="top">{{houseDetail.house_info.layout}}</view>
						<view class="bottom">户型</view>
					</view>
					<view class="property">
						<view class="top">{{houseDetail.house_info.house_area}}㎡</view>
						<view class="bottom">面积</view>
					</view>
					<view class="property">
						<view class="top">{{houseDetail.house_info.house_floor}}</view>
						<view class="bottom">楼层</view>
					</view>
					<view class="property">
						<view class="top">{{houseDetail.house_info.house_orientations}}</view>
						<view class="bottom">朝向</view>
					</view>
				</view>
			</view>
			<view class="grey"></view>
			
			
			<view class="con_mid">
				<view class="houseInfo">
					房屋简介
				</view>
				<view class="houseIntroduction">
					{{houseDetail.house_info.content}}
				</view>
				<view class="houseInfo">
					房间配置
				</view>
				<view class="houseConfig">
					<view class="configList" id="configList">
						<view class="configItem" v-for="(item,index) in houseDetail.config_info" :key="index">
							<view class="top">
								<image :src=siteUrl+item.image mode=""></image>
							</view>
							<view class="bottom">
								{{item.name}}
							</view>
						</view>
					</view>
					<!--<view  class="configButton"><image src="../../../static/icon/detail-5.png" @click="checkDetail" mode=""></image></view>
				--></view>
				
				<view class="houseInfo">
					你的房东
				</view>
				<view class="landlordInfo">
					<navigator :url="'../landlord/index?agent_id='+houseDetail.house_info.agent_id">
					<image :src="siteUrl+houseDetail.house_info.avatar"></image>
					<view class="info">
						<view class="name">{{houseDetail.house_info.nickname}}</view>
						<view class="fans">{{houseDetail.house_info.fans}}粉丝</view>
					</view>
					</navigator>
					
					
						<view v-if="isAttention">
							<view class="attention">
							已关注
							</view>
						</view>
						<view v-else>
							<view class="attention">
							未关注
							</view>
						</view>
						
						
					
				</view>
				
				
				<navigator :url="'../discover/houseDetail?house_id='+item.Id"  v-for="(item,index) in houseDetail.houseList_agent">
				<view class="visitprint" >			
						
						<image v-if="item.image" class="left" :src="siteUrl+item.image"></image>
						<image v-else class="left" :src="siteUrl+item.images.split(',',1)"></image>
						
						
						<view class="right">
							<view class="title">
								{{item.title}}
							</view>
							<view class="location">
								<image src="/static/img/icon-location.png"></image>
								<view class="note">{{item.location_near}}</view>
							</view>
							<view class="price">
								<font style="font-size:40rpx;color:#FF635C">{{item.price}}</font>元/月
							</view>				
						</view>		
				</view>	
				</navigator>		
															
															
	
				<view class="grey"></view>				
				<view class="bottom">
					<view class="daohang"  @click="open(houseDetail.house_info.lon,houseDetail.house_info.lat,houseDetail.house_info.location_near,houseDetail.house_info.location_map)">
						<image src="/static/icon/daohang.png"></image>
						<view class="note">导航</view>										
					</view>
					<view class="consult">
						<image src="/static/icon/consult.png"></image>
						<view class="note">咨询</view>						
					</view>
					<view class="order common">预约看房</view>
					<view class="contact common" @click="tel(houseDetail.house_info.mobile)">联系他</view>
				</view>																								
			</view>									
		</view>
		<mpopup  ref="mpopup" :isdistance="true"></mpopup>
	</view>
</template>

<script>
	var _self;
	import mpopup from '@/components/xuan-popup/xuan-popup.vue';
	export default{
		components:{
			mpopup
		},
		data(){
			return{
				siteUrl:this.websiteUrl,
				//isAttention:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				houseDetail:{},
				
			}
		},
		onLoad(e){
			_self = this
			this.checkLogin()
			this.houseId = e.house_id
			this.getDetail()
		},
		methods:{
			open($lon,$lat,$location_near,$location_map){
				//console.log(e)
				//var value = e.target.value
				uni.openLocation({
				longitude: Number($lon),
					latitude: Number($lat),
					name: $location_near,
					address: $location_map
				})
			},
			play($Id){
				uni.navigateTo({
					url:"/pages/discover/video?house_id="+$Id
				})
			},
			checkDetail(){
				let list = document.getElementById('configList')
				list.style.height = 150 + 'px'
			},
			getDetail(){
				_self = this
				uni.request({
					url: this.websiteUrl+'/userapi.php/house/detail?house_id='+this.houseId,
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded',						
					},
					data: {token:uni.getStorageSync('token')},
					success: res => {
						console.log(res)
						if(res.data.code == 1){
							_self.houseDetail = res.data.data														
							//var is_attention = res.data.data.house_info.is_attention
							//if(is_attention == 1){
								//_self.isAttention = true
							//}
																	
																					
																					
						}
						if(res.data.code == 1000){
							uni.showToast({
								title:'该房源已下架',
								duration: 2000,
								icon:'none'
							})
							setTimeout(function(){ 
								uni.navigateBack({
									delta:1
								})																
							}, 2000);
								
																			
						}
					},
				
				});
				
			},
			tel($mobile){			
				uni.makePhoneCall({
					phoneNumber:$mobile
				})			
			},
			//收藏
			collect($house_id,$action){
				uni.request({
					url: this.websiteUrl+'/userapi.php/house/collect',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'				  
					},
					data: {
						house_id:$house_id,
						token:uni.getStorageSync('token'),	
						action:$action
					},
					success: res => {
						if(res.data.code == 1){
							
							if($action == 'add'){
								_self.houseDetail.house_info.is_collect = 1
								_self.$refs.mpopup.open({
									type:'success',
									content:'收藏成功',
									timeout:2000,
								}); 
								return false;								
							}else{
								_self.houseDetail.house_info.is_collect = 0
								_self.$refs.mpopup.open({
									type:'success',
									content:'收藏取消成功',
									timeout:2000,
								}); 
								return false;
							}													 						 
						}else{
							_self.$refs.mpopup.open({
								type:'info',
								content:res.data.msg,
								timeout:2000,
							}); 
							return false;														
						}						
					},
					fail: () => {},
					complete: () => {}
				});
			},												
			returnback(){
				uni.navigateBack({
					delta:1
				})
			}
		},		
	}
</script>

<style>
	.swiperTop{
		position: relative;
	}
	.header{
		position: absolute;
		top:90rpx;
		left:0;
		width:100%;
		height: 36rpx;
	}
	.header .left{
		position: relative;
		z-index: 1000000;
		width:36rpx;
		height:36rpx;
		left:36rpx;
	}
	.header .mid{
		z-index:10000;
		width:36rpx;
		height: 36rpx;
		position:relative;
		left:580rpx
	}
	.header .right{
		z-index:10000;
		width:36rpx;
		height: 36rpx;
		position:relative;
		left:608rpx;
	}
	
	swiper{
		width: 750upx;
		height:720upx
	}
	swiper-item{
		width: 750upx;
		height:720upx
	}
	.swiper-image{  
	    width:750upx;  
	    height:720upx; 
	} 
	.content{
		position: relative;
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
		z-index: 9;
	}
	.tip{
		position: absolute;
		top: -35upx;
		left: 0;
		width: 100%;
		height: 20upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
	}
	.con_head{
		padding-bottom: 20upx;
		background: #FFFFFF;
	}
	.con_head .name{
		width: 90%;
		margin: 20upx auto 10upx;
		font-size: 40upx;
		line-height: 56upx;
	}
	.con_head .address{
		width: 90%;
		margin: 0 auto ;
		font-size: 24upx;
		line-height: 34upx;
	}
	.con_head .price{
		width: 90%;
		margin: 20upx auto;
		color: #FF635C;
		font-size: 48upx;
		line-height: 58upx;
	}
	.con_head .price text{
		padding-left: 10upx;
		color: #000000;
		font-size: 24upx;
	}
	.tags{
		display: flex;
		width: 90%;
		margin: 20upx auto;
	}
	.tags .tag{
		margin-right: 40upx;
		width: 160upx;
		height: 50upx;
		border-radius: 25upx;
		background: #F6F5FA;
		font-size: 28upx;
		line-height: 50upx;
		text-align: center;
	}
	.houseProperty{
		display: flex;
		width: 90%;
		margin: 40upx auto;
	}
	.houseProperty .property{
		width: 25%;
		text-align: center;
	}
	.houseProperty .property .top{
		font-size: 34upx;
	}
	.houseProperty .property .bottom{
		margin-top: 20upx;
		color: #999999;
		font-size: 26upx;
	}
	.con_mid{
		overflow: hidden;
		margin-top: 20upx;
		background: #FFFFFF;
	}
	.houseInfo{
		width: 90%;
		margin: 20upx auto 0;
		font-size: 32upx;
		line-height: 80upx;
	}
	.houseIntroduction{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40upx;
		font-size: 28upx;
		line-height: 48upx;
		border-bottom:solid 1px #EEEEEE;
	}
	.houseConfig{
		display: flex;
		justify-content: space-between;
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding-bottom: 40upx;
		border-bottom: solid 1px #EEEEEE;
	}
	.houseConfig .configList{		
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;		
	}
	.houseConfig .configItem{
		width: 20%;
		margin-top:25rpx	
	}
	.houseConfig .configItem .top{
		display: flex;
		justify-content: center;
	}
	.houseConfig .configItem .top image{
		width: 70upx;
		height: 70upx;
	}
	.houseConfig .configItem .bottom{
		margin-top: 20upx;
		font-size: 24upx;
		text-align: center;
	}
	.houseConfig .configButton{
		width: 20%;
		text-align: center;
	}
	.houseConfig .configButton image{
		width: 70upx;
		height: 70upx;
	}
	
	.landlordInfo{
		width:100%;
		height:100rpx;
		margin-top:40rpx;
		margin-bottom:20rpx;
		position:relative;
	}
	
	.landlordInfo image{
		width:100rpx;
		height:100rpx;
		position:absolute;
		left:32rpx;
		border-radius:50%;
	}
	
	.landlordInfo .info{
		width:auto;
		height:100rpx;
		position:absolute;
		left:152rpx;
		
	}
	
	.landlordInfo .info .name{
		font-size:32rpx;
		color:#373737;
		line-height: 44rpx;
	}
	
	.landlordInfo .info .fans{
		font-size:24rpx;
		color:#999999;
		line-height: 34rpx;
	}
	
	.landlordInfo .attention{
		position:absolute;
		top:16rpx;
		right:32rpx;
		width:132rpx;
		height: 68rpx;
		background: #F6F6F6;
		color: #4F5861;
		border-radius:40rpx;
		font-size:24rpx;
		line-height: 68rpx;
		text-align: center;
	}
	.visitprint{
		width:100%;
		height: 264rpx;
	}
	
	.visitprint .left{
		padding-left:32rpx;
		width:240rpx;
		height: 200rpx;
		padding-top:32rpx;
		float:left;
		
	}
	
	.visitprint .right{
		width:422rpx;
		height: 200rpx;
		margin-left:24rpx;
		float:left;
	}
	
	.right .title{
		font-size:30rpx;
		line-height: 42rpx;
		color:#373737;
		padding-top:32rpx;
	}
	
	.right .location{
		width:100%;
		height: 34rpx;
		margin-top:12rpx;
	}
	
	.right .location image{
		width:28rpx;
		height: 28rpx;
		float:left;
	}
	
	.right .location .note{
		float:left;
		font-size:24rpx;
		line-height: 34rpx;
		color:#999999;
		margin-left:12rpx;
	}
	
	
	.right .price{
		font-size:32rpx;
		line-height:48rpx;
		margin-top:12rpx;		
	}
	
	
	.grey{
		width:100%;
		height: 20rpx;
		background: #E5E5E5;
	}
	
	.bottom{
		width:100%;
		
		position:relative;
	}
	
	.bottom .daohang{
		width:48rpx;
		position:absolute;
		left:64rpx;
		top:18rpx;
	}
	
	.bottom .daohang image{
		width:48rpx;
		height: 48rpx;
	}
	
	.bottom .daohang .note{
		color:#4F5861;
		font-size:24rpx;
		line-height: 34rpx;
	}
	
	.bottom .consult{
		width:48rpx;
		position:absolute;
		left:166rpx;
		top:18rpx;
	}
	
	.bottom .consult image{
		width:48rpx;
		height: 48rpx;
	}
	
	.bottom .consult .note{
		color:#4F5861;
		font-size:24rpx;
		line-height: 34rpx;
	}
	
	.bottom .common{
		width:220rpx;
		height:92rpx;
		background:#F89572;
		border-radius:60rpx;
		color:#FFFFFF;
		font-size:32rpx;
		line-height: 92rpx;
		text-align:center;
		
	}
	
	.bottom .order{
		position:absolute;
		left:258rpx;
		top:14rpx;
	}
	
	.bottom .contact{
		position:absolute;
		left:498rpx;
		top:14rpx;
	}
</style>
